<template>
  <div class="box">
    <a-table
        :columns="columns"
        :dataSource="tableData"
        :loading="loading"
        :pagination="pagination"
        @onTabChange="handleTableChange"
        bordered
        :scroll="{
        x: 'max-content',
      }"
    >
      <template #title>
        <div>
          <a-row wrap="true" :gutter="[9, 10]">
            <a-col
                :xl="$store.getters.isMobile ? 12 : 4"
                :lg="$store.getters.isMobile ? 12 : 6"
                :md="$store.getters.isMobile ? 12 : 8"
                :sm="12"
                :xs="$store.getters.isMobile ? 12 : 24"
            >
              <a-input
                  class="w-100"
                  v-model:value="name"
                  placeHolder="搜索联系人名称"
              ></a-input
              >
            </a-col>
            <a-col
                :xl="$store.getters.isMobile ? 12 : 4"
                :lg="$store.getters.isMobile ? 12 : 6"
                :md="$store.getters.isMobile ? 12 : 8"
                :sm="12"
                :xs="$store.getters.isMobile ? 12 : 24"
            >
              <a-input
                  class="w-100"
                  v-model:value="phone"
                  placeHolder="搜索联系人电话"
              ></a-input
              >
            </a-col>
            <a-col
                :xl="$store.getters.isMobile ? 12 : 4"
                :lg="$store.getters.isMobile ? 12 : 6"
                :md="$store.getters.isMobile ? 12 : 8"
                :sm="12"
                :xs="$store.getters.isMobile ? 12 : 24"
            >
              <a-select
                  class="w-100"
                  placeholder="选择渠道"
                  :options="sourceOptions"
                  v-model:value="source"
              >
              </a-select>
            </a-col>
            <a-col>
              <div>
                <a-button style="margin-right: 10px" @click="reset"
                >重置
                </a-button>
                <a-button type="primary" @click="toSearch">搜索</a-button>
              </div>
            </a-col>
          </a-row>
        </div>
      </template>

      <template #bodyCell="{ column, record }">
        <template
            v-if="
            column.key == 'name' ||
            column.key == 'phone' ||
            column.key == 'village_name' ||
            column.key == 'created_at' ||
            column.key == 'updated_at'
          "
        >
          {{ record[column.key] }}
        </template>
        <template v-if="column.key == 'source'">
          {{ record[column.key].source || "--" }}
        </template>
        <template v-if="column.key == 'causation'">
          {{ record.causation == 1 ? "后台添加" : "用户自建" }}
        </template>

        <template v-if="column.key == 'action'">
          <a-button type="link" @click="toDetailInfo(record.id)">详情</a-button>

          <a-popconfirm
              title="确认将该数据解除黑名单?  "
              ok-text="确认"
              cancel-text="取消"
              @confirm="removeBlackItem(record.id)"
          >
            <a-button type="link">解除黑名单</a-button>
          </a-popconfirm>
          <a-popconfirm
              title="确认删除该数据?  "
              ok-text="确认"
              cancel-text="取消"
              @confirm="deleteItem(record.id)"
          >
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>

    <!-- 详情、、、成交合同 -->
    <ChannelDetail
        :visible="detailVisible"
        :id="detailID"
        @closeDrawer="hideDrawer"
    />
  </div>
</template>

<script>
import {ref, reactive, toRefs, watch, computed} from "vue";
import request from "../../../../common/utils/request";
import {message} from "ant-design-vue";
import ChannelDetail from "./ChannelDetail.vue";

export default {
  props: {
    activeKey: {
      type: String,
      default: "",
    },
    sourceOptions: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    ChannelDetail,
  },
  setup(props, context) {
    const state = reactive({
      loading: false,
    });

    const columns = [
      {title: "联系人名称", key: "name"},
      {title: "联系人电话", key: "phone"},
      {title: "所在区域", key: "address", dataIndex: "address"},
      {title: "渠道类型", key: "source"},
      {title: "来源", key: "causation_txt", dataIndex: "causation_txt"},
      {title: "关联项目", key: "village_name"},
      {title: "限制时间", key: "updated_at"},
      {title: "创建时间", key: "created_at"},
      {
        title: "操作",
        key: "action",
      },
    ];

    const searchParam = reactive({
      name: "",
      phone: "",
      source: undefined,
    });

    const total = ref(0);
    const page = ref(1);
    const limit = ref(10);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));

    const tableData = ref([]);
    const getTableData = () => {
      state.loading = true;
      const param = {type: 3, page: page.value, pageSize: limit.value};
      Object.keys(searchParam).forEach((key) => {
        if (searchParam[key]) {
          param[key] = searchParam[key];
        }
      });
      request
          .get("/org", "/business/customer/channel", param)
          .then((res) => {
            console.log(res);
            tableData.value = res.list;
            total.value = res.total;
            context.emit("numChange", res.customerStatus0Count + res.waitAuditCompanyCount);

          })
          .finally(() => {
            state.loading = false;
          });
    };
    getTableData();

    const handleTableChange = (pager, filters, sorter) => {
      console.log(pager);
      page.value = pager.current;
      limit.value = pager.pageSize;
      getTableData();
    };

    // 详情
    const detailID = ref(0);
    const detailVisible = ref(false);
    const toDetailInfo = (val) => {
      detailID.value = val;
      detailVisible.value = true;
    };
    const hideDrawer = () => {
      detailVisible.value = false;
    };

    // 解除黑名单
    const removeBlackItem = (val) => {
      console.log(val);
      request
          .post("/org", "/business/clue/removeBlackList", {id: val})
          .then((res) => {
            message.success("操作成功");
            getTableData();
          });
    };
    //删除
    const deleteItem = (val) => {
      console.log(val);
      request
          .del("/org", "/business/customer/channel", {id: val})
          .then((res) => {
            message.success("删除成功！");
            getTableData();
          });
    };

    const reset = () => {
      Object.keys(searchParam).forEach((key) => {
        searchParam[key] = key == "source" ? undefined : "";
      });
      page.value = 1;
      getTableData();
    };

    const toSearch = () => {
      page.value = 1;
      getTableData();
    };

    watch(
        () => props.activeKey,
        (val) => {
          if (val == "blacklist") {
            getTableData();
          }
        }
    );

    return {
      ...toRefs(state),
      columns,
      tableData,
      pagination,
      handleTableChange,
      deleteItem,
      removeBlackItem,
      toDetailInfo,
      detailVisible,
      hideDrawer,
      detailID,
      ...toRefs(searchParam),
      reset,
      toSearch,
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  padding: 10px;
}

.blacklist-title {
  // display: flex;
}

.w-100 {
  width: 100%;
}
</style>
